<template>
	<view>
		<view class="userInfo">
			<view class="list">
				<view class="title">头像</view>
				<view class="">
					<u-upload width="90" height="90" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1">
						<image class="avatar" v-if="userInfo.headimg" :src="userInfo.headimg" mode="aspectFill"></image>
					</u-upload>
				</view>
			</view>
			<view class="list">
				<view class="title">昵称</view>
				<view class="name" @click="setName">{{nickname}}</view>
			</view>
			<view class="list">
				<view class="title">性别</view>
				<view class="name" @click="setNex">{{sex}}</view>
			</view>
			<view class="list">
				<view class="title">出生日期</view>
				<view class="name" @click="dateShow = true">{{formData.birthTimeText}}</view>
			</view>
			<view class="list">
				<view class="title">地址</view>
				<view class="name" @click="NAVPAGE('/pages/content/addressManage/addressManage')">
					管理地址
				</view>
			</view>
			<view class="list">
				<view class="title">创作者认证</view>
				<view class="name" @click="NAVPAGE('/pages/content/verification/verification')">
					查看
				</view>
			</view>
			<view class="list">
				<view class="title">简介</view>
				<view class="name" @click="contentNex" v-if="userInfo.readme">{{userInfo.readme}}</view>
				<view class="name" v-else @click="contentNex">
					编辑简介
				</view>
			</view>
			<view class="upload">
				<view class="title">标签</view>
				<view class="tabs-box">
					<view class="tabs-item" :class="{tabActive: item.state}" v-for="item in tabsList" :key="item.id"
						@click="tabsChange(item)">{{item.name}}</view>
				</view>
			</view>
			<!-- <view class="list">
				<view class="title">手机号</view>
				<view class="name" @click="setPhone">{{userInfo.phone}}</view>
			</view>
			<view class="list">
				<view class="title">绿泡泡</view>
				<view class="name" @click="setGreenBubble">{{userInfo.lvpp}}</view>
			</view>
			
			<view class="list">
				<view class="title">身份证号</view>
				<view class="name" @click="setidentityBubble">{{userInfo.id_card}}</view>
			</view>
			<view class="list">
				<view class="title">出生日期</view>  
				<view class="name" @click="dateShow = true">{{birthTimeText}}</view>
			</view> -->
			<!-- <view class="list">
				<view class="title">邀请码</view>
				<view class="name" @click="create">{{userInfo.referral_code ? userInfo.referral_code:'点击生成'}} </view>
			</view> -->

			<view class="list">
				<view class="title">背景图设置</view>
				<view class="">
					<u-upload width="90" height="90" @afterRead="afterReads" @delete="deletePics" multiple
						:maxCount="1">
						<image class="avatar" style="border-radius: 10%;" v-if="userInfo.backimg"
							:src="userInfo.backimg" mode="aspectFill"></image>
						<text v-else>上传</text>
					</u-upload>
				</view>

			</view>
			<!--<view class="list">
				<view class="title">简介</view>
				<view class="name" @click="contentNex" v-if="userInfo.readme">{{userInfo.readme}}</view>
				<view class="name" v-else @click="contentNex">
					编辑简介
				</view>
			</view>
			<view class="list">
				<view class="title">语音</view>
				<view class="name" @click="recording">点击录音</view>
			</view>
			
			
			<view class="video-box" v-if="userInfo.recording">
				<Audio :intervalTime="intervalTime" :music="userInfo.recording"></Audio>
			</view>
			
			<view class="upload">
					<view class="title" style="font-weight: 600;
    font-size: 30rpx;">
				 身份证正面
				</view>
				<view class="image-box">
					<u-upload :fileList="imageList" width="90" height="90" @afterRead="afterReadsss"
						@delete="deletePics" multiple :maxCount="1"></u-upload>
				</view>
			</view>
			<view class="upload">
							<view class="title" style="font-weight: 600;
			font-size: 30rpx;">
						 身份证反面
						</view>
						<view class="image-box">
							<u-upload :fileList="imageLists" width="90" height="90" @afterRead="afterReadssss"
								@delete="deletePicss" multiple :maxCount="1"></u-upload>
						</view>
					</view> -->

			<!--  <u-button style="margin-top: 60rpx;background: linear-gradient(180deg, #FD8E1A 0%, #FF7826 100%);"
            	type="error" :ripple="true" ripple-bg-color="rgba(0, 0, 0, 0.15)" :hair-line="false" shape="circle"
            	class="u-m-t-50" mode="dark" @click="editUserInfos()" :disabled="!isFinishInput">保存</u-button>-->

		</view>
		<u-modal :show="modalShow" title="修改昵称" showCancelButton @cancel="modalShow = false" @confirm="confirm">
			<view class="input">
				<u--input placeholder="请输入内容" maxlength="10" v-model="nickname" border="bottom" clearable></u--input>
			</view>
		</u-modal>
		<!-- 	<u-modal :show="computerShow" title="修改手机号" showCancelButton @cancel="computerShow = false"
			@confirm="confirmMobile">
			<view class="input">
				<u--input placeholder="请输入内容" v-model="phone" border="bottom" clearable></u--input>
			</view>
		</u-modal>
		<u-modal :show="GreenwxShow" title="修改绿泡泡" showCancelButton @cancel="GreenwxShow = false" @confirm="GreenwxLpp">
			<view class="input">
				<u--input placeholder="请输入内容" v-model="wxlpp" border="bottom" clearable></u--input>
			</view>
		</u-modal>
		<u-modal :show="identityShow" title="修改身份证号" showCancelButton @cancel="identityShow = false" @confirm="identityidCard">
			<view class="input">
				<u--input placeholder="请输入内容" v-model="idCard" border="bottom" clearable></u--input>
			</view>
		</u-modal>
		<u-modal :show="introlShow" title="修改简介" showCancelButton @cancel="introlShow = false" @confirm="confirmIntrol">
			<view class="input">
				<u--input placeholder="请输入内容" v-model="readme" border="bottom" clearable></u--input>
			</view>
		</u-modal> -->
		<u-modal :show="introlShow" title="修改简介" showCancelButton @cancel="introlShow = false" @confirm="confirmIntrol">
			<view class="input">
				<u--input placeholder="请输入内容" v-model="readme" border="bottom" clearable></u--input>
			</view>
		</u-modal>
		<u-picker :show="pickerShow" :columns="[sexList]" keyName="name" @cancel="pickerShow = false"
			@confirm="confirms"></u-picker>

		<!-- <u-popup :show="soundTextShow" @close="soundTextShow = false" closeable>
			<view class="conversion">
				<view class="title">{{soundTextTitle}}</view>
				<view class="recording" @touchstart="touchStart" @touchend="endRecord">
					<image src="../../../static/images/startSound.png" class="startSound" mode="widthFix"></image>
					<text>{{soundText}}</text>
				</view>
			</view>
		</u-popup> -->
		<u-datetime-picker :show="dateShow" mode="date" :maxDate="maxDate" :minDate='631164875000'
			@confirm="timeConfirm" @close="dateShow = false" closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	import {
		uploadFile,
		uploadMp3File
	} from '@/store/upload.js'
	const recorderManager = uni.getRecorderManager();
	// import AddressPicker from '@/components/lingdang-AddressPicker/AddressPicker.vue'
	// import Audio from '@/components/WZS-Audio.vue'

	export default {
		components: {
			// AddressPicker,
			// Audio,
		},
		data() {
			return {
				isFinishInput: true,
				identityShow: false,
				computerShow: false,
				modalShow: false,
				introlShow: false,
				pickerShow: false,
				dateShow: false,
				GreenwxShow: false,
				wxlpp: '输入绿泡泡',
				idCard: '输入身份证号',
				readme: '', //描述
				phone: '手机号',
				value: false,
				content: '',
				sex: '选择性别',
				sexList: [{
					id: "1",
					name: "男"
				}, {
					id: "2",
					name: "女"
				}],
				imageList: [],
				imageLists: [],
				type: '', //线上线下 全部
				TypeActions: [{
					name: '全部',
				}, {
					name: '线上',
				}, {
					name: '线下',
				}],
				Address: '选择您的所在地区', //地址
				index: 0,
				province: '', //省
				city: '', //市
				district: '', //区
				Background: '', //背景图
				soundTextShow: false,
				soundTextTitle: '语音转文字',
				soundText: '按住说话',
				intervalTime: '',
				intervalTimeTwo: '',
				timer: 0,
				recType: "mp3",
				useAEC: false,
				appUseH5Rec: false,
				isMounted: true,
				maxDate: Date.now(),
				birth: '', //转换年龄
				tabsList: [],
				nickname: "微信用户 xxx",
				formData: {
					// recording: '', //录音
					headimg: '', //头像
					birthTimeText: '请选择出生日期', //年齡
				}
			}
		},
		// watch: {
		// 	formData: {
		// 		handler(val) {
		// 			if (val.headimg && val.nickname && val.sex && val.birthTimeText) {
		// 				this.isFinishInput = true
		// 			} else {
		// 				this.isFinishInput = false
		// 			}
		// 		},
		// 		deep: true
		// 	}
		// },
		computed: {
			...mapState("user", ['userInfo'])
		},
		onLoad() {
			this.getUserInfo()
			this.SexSelection()
			this.examine()
			this.getTabs()
		},
		mounted() {

		},
		onShow() {},
		methods: {
			...mapActions("user", ['getUserInfo']),

			async recording() {
				// #ifndef H5
				let state = await this.useMp3()
				if (!state) return
				// #endif
				this.soundTextShow = true
			},
			examine() {
				this.nickname = this.userInfo.nickname
				if (this.userInfo.base_birthday != '') {
					this.formData.birthTimeText = this.userInfo.base_birthday
				}
			},
			PickerChange: function(e) {
				this.Address = e.data[0].name + e.data[1].name + e.data[2].name
				this.province = e.data[0].name
				this.city = e.data[1].name
				this.district = e.data[2].name

				this.editUserInfo({
					// nickname: this.nickname
					region_province: this.province, //省
					region_city: this.city, //市
					region_area: this.district, //区
				})
			},
			create() {
				if (this.userInfo.referral_code) {
					uni.setClipboardData({
						data: this.userInfo.referral_code,
						success() {
							uni.$u.toast('复制成功')
						}
					})
				} else {
					this.$api.referralCode({
						uid: uni.getStorageSync('uid')
					}).then(res => {
						console.log(res);
						uni.showToast({
							title: "生成成功！",
							icon: "none",
							mask: true
						})
						setTimeout(() => {
							this.getUserInfo()
						}, 1000);

					})
				}
			},
			timeConfirm(e) {

				this.birth = e.value / 1000
				this.formData.birthTimeText = this.$u.timeFormat(e.value, 'yyyy年mm月dd日')
				this.dateShow = false
				console.log(this.formData.birthTimeText, this.birth, 'ggggggggggg')
				// return
				this.editUserInfo({
					base_birthday: this.birth
				})
			},
			tabsChange(item) {
				item.state = !item.state
				let tabs = this.tabsList.filter(item => item.state).map(item => item.id).join(',');
				console.log(tabs, '点击')
				this.editUserInfo({
					lables: tabs
				})
			},
			change(e) {

			},
			setName() {
				this.modalShow = true
				this.nickname = this.userInfo.nickname
			},
			setPhone() {
				this.computerShow = true
				this.phone = this.userInfo.phone
			},
			setGreenBubble() {
				this.GreenwxShow = true
				this.wxlpp = this.userInfo.lvpp
			},
			setidentityBubble() {
				this.identityShow = true
				this.idCard = this.userInfo.id_card
			},
			SexSelection() {
				this.sex = this.userInfo.base_sex == 2 ? '女' : '男'
			},
			getTabs() {
				this.$api.getTabsList().then(res => {
					res.data.forEach(item => {
						item.state = false;
					});
					this.tabsList = res.data

					const userTags = this.userInfo.lables.split(',').map(tag => parseInt(
					tag)); // 将字符串分割成数组，并转换为整数类型

					console.log(userTags, 'aaaaaaaaaaaaaa')

					this.tabsList.forEach(tab => {
						if (userTags.includes(tab.id)) {
							tab.state = true;
						}
					});

				});
			},
			setNex(e) {
				this.pickerShow = true
				this.sex = this.userInfo.base_sex == 2 ? '女' : '男'
			},
			contentNex() {
				this.introlShow = true
				this.readme = this.userInfo.readme
			},
			confirm(e) {
				this.modalShow = false
			 
					 
					// 调用 editUserInfo 更新用户信息
					this.editUserInfo({
						nickname: this.nickname
					});

				 

				this.editUserInfo({
					nickname: this.nickname
				})
			},
			confirmMobile(e) {
				this.pickerShow = false
				this.editUserInfo({
					phone: this.phone
				})
			},
			GreenwxLpp() {
				this.GreenwxShow = false
				this.editUserInfo({
					lvpp: this.wxlpp
				})
			},
			identityidCard() {
				this.identityShow = false
				this.editUserInfo({
					id_card: this.idCard
				})
			},
			confirmIntrol(e) {
				this.introlShow = false
				this.editUserInfo({
					readme: this.readme
				})
			},
			confirms(e) {
				this.pickerShow = false;

				this.sex = e.value[0].name;

				this.editUserInfo({
					base_sex: e.value[0].id
				})
			},
			editUserInfo(info) {
				this.$api.editUserInfo(info).then((res) => {
					uni.$u.toast('修改成功！')
					this.getUserInfo()

				})
			},
			// editUserInfos(){
			// 	console.log(this.formData)
			// 	this.$api.editUserInfo({
			// 		headimg:this.formData.headimg,
			// 		nickname:this.formData.nickname,
			// 		base_sex:this.formData.sex == '男' ? 1 : 2,
			// 		base_birthday:this.birth
			// 	}).then((res) =>{
			// 		uni.$u.toast('修改成功！')
			// 		this.getUserInfo()	 
			// 	})
			// },


			// 新增图片
			async afterRead(event) {
				const result = await uploadFile([event.file[0].url])
				this.editUserInfo({
					headimg: result[0]
				})
			},
			// 新增图片背景图
			async afterReads(event) {
				const result = await uploadFile([event.file[0].url])
				this.editUserInfo({
					backimg: result[0]
				})
			},
			edit() {
				this.editUserInfo({
					recording: this.formData.recording
				})
			},
			// 删除图片
			deletePics(event) {
				this.imageList.shift(event, 1)
				console.log(this.imageList.map(item => item.url), '删除代码')
				this.editUserInfo({
					slider: this.imageList.map(item => item.url)
				})

			},
			// 新增图片
			async afterReadsss(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.imageList.length
				lists.map((item) => {
					this.imageList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile([lists[i].url])
					let item = this.imageList[fileListLen]
					this.imageList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result[0]
					}))
					fileListLen++
					// console.log(this.imageList, 'aaaaaaaaaaaaa')
				}
				console.log(this.imageList.map(item => item.url), 'this.imageList')
				this.editUserInfo({
					slider: this.imageList.map(item => item.url)
				})
			},
			// 删除图片
			deletePicss(event) {
				this.imageLists.shift(event, 1)
				console.log(this.imageLists.map(item => item.url), '删除代码')
				this.editUserInfo({
					slider: this.imageLists.map(item => item.url)
				})

			},
			// 新增图片
			async afterReadssss(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.imageLists.length
				lists.map((item) => {
					this.imageLists.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile([lists[i].url])
					let item = this.imageList[fileListLen]
					this.imageList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result[0]
					}))
					fileListLen++
				}
				console.log(this.imageLists.map(item => item.url), 'this.imageList')
				this.editUserInfo({
					slider: this.imageLists.map(item => item.url)
				})
			},

			async touchStart(e) {
				this.soundTextTitle = '说话中...'
				this.soundText = ''
				this.timer = setInterval(() => {
					this.intervalTimeTwo += 0.5;
					if (this.intervalTimeTwo >= 0.5 && !this.isRecord) {
						this.isRecord = true;
						this.intervalTimeTwo = 0;
						recorderManager.start({
							sampleRate: 16000,
							duration: 10000, //指定录音的时长，单位 ms
							format: "MP3",
							bitrate: 16
						});
					}
					if (this.intervalTimeTwo >= 60) {
						this.endRecord();
					}
				}, 500);
			},
			endRecord(e) {
				clearInterval(this.timer);
				if (this.intervalTimeTwo <= 0.5) {
					uni.$u.toast('录音太短');
					this.soundTextTitle = '语音转文字'
				} else if (this.intervalTimeTwo >= 60) {
					uni.$u.toast('最长60s录音');
					this.soundTextTitle = '语音转文字'
				}
				if (this.isRecord) {
					this.soundTextTitle = '请录音'
					recorderManager.stop();
					uni.hideToast()
					setTimeout(() => {
						this.isRecord = false;
					}, 500); //延迟小段时间停止录音, 更好的体验
					// 语音路径
					// this.intervalTimeTwo = this.intervalTime	
					recorderManager.onStop((res) => {
						uploadFile([res.tempFilePath]).then((upres) => {
							this.editUserInfo({
								recording: upres[0],
								interval: this.intervalTimeTwo
							})
							this.soundTextShow = false
						})
					});
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.upload {
		background-color: #fff;
		padding: 20rpx 0rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.title {
			font-weight: 600;
			font-size: 30rpx;
		}
	}

	.tabs-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10rpx;

		.tabs-item {
			background-color: #f5f5f5;
			font-size: 24rpx;
			padding: 10rpx 20rpx;
			margin: 10rpx;
			border-radius: 100rpx;
		}

		.tabActive {
			background-color: #ff6600 !important;
			color: #fff !important;
		}

	}

	.userInfo {
		padding: 50rpx 80rpx;
		box-sizing: border-box;

		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 120rpx;
			color: #262626;

			.avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.title {
				font-weight: 600;
				font-size: 30rpx;
			}

			.name {
				font-size: 28rpx;
				// width: ;
				text-align: right;
				width: 260rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: block;

			}
		}
	}

	.conversion {
		height: 500rpx;

		.title {
			text-align: center;
			font-weight: 700;
			height: 100rpx;
			line-height: 100rpx;
		}

		.recording {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			height: 400rpx;

			image {
				width: 130rpx;
				height: 130rpx;
			}

			text {
				margin-top: 30rpx;
			}
		}
	}

	.input {
		width: 100%;
	}

	.upload {
		background-color: #fff;
		padding: 20rpx 0rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.image-box {
		margin-top: 20rpx;
	}

	.startSound {
		pointer-events: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}
</style>